<template>
  <div class="user-list">
    <h1>{{ pageTitle }}</h1>
    <div class="actions">
      <button @click="fetchUserList" :disabled="loading">
        {{ loading ? '加载中...' : '刷新列表' }}
      </button>
      <button @click="handleAdd" class="add-btn">添加用户</button>
    </div>
    
    <div v-if="error" class="error-message">
      {{ error }}
    </div>
    
    <table v-if="userList.length > 0" class="table">
      <thead>
        <tr>
          <th>ID</th>
          <th>用户名</th>
          <th>邮箱</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in userList" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.username }}</td>
          <td>{{ user.email }}</td>
          <td>
            <button @click="handleEdit(user.id)" class="edit-btn">编辑</button>
            <button @click="handleDelete(user.id)" class="delete-btn">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <div v-else-if="!loading" class="empty-tip">暂无用户数据</div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { userAPI } from '@/api/user'

const userList = ref<any[]>([])
const pageTitle = ref('用户管理系统')
const loading = ref(false)
const error = ref('')

// 获取用户列表
const fetchUserList = async () => {
  loading.value = true
  error.value = ''
  try {
    const res = await userAPI.getList()
    userList.value = res.data || []
    console.log('用户列表获取成功:', userList.value)
  } catch (err: any) {
    console.error('获取用户列表失败', err)
    error.value = err.response?.data?.message || err.message || '获取数据失败，请稍后再试'
  } finally {
    loading.value = false
  }
}

// 添加用户
const handleAdd = () => {
  console.log('添加用户')
  // TODO: 实现添加用户功能
}

// 编辑用户
const handleEdit = (id: number) => {
  console.log('编辑用户ID:', id)
  // TODO: 实现编辑用户功能
}

// 删除用户
const handleDelete = async (id: number) => {
  if (confirm('确定删除该用户吗？')) {
    try {
      await userAPI.delete(id)
      console.log('用户删除成功')
      await fetchUserList() // 重新获取列表
    } catch (err: any) {
      console.error('删除用户失败', err)
      alert(err.response?.data?.message || err.message || '删除失败，请稍后再试')
    }
  }
}

onMounted(() => {
  fetchUserList()
})
</script>

<style scoped>
.user-list {
  padding: 20px;
}

.actions {
  margin-bottom: 20px;
}

.actions button {
  margin-right: 10px;
}

.add-btn {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.add-btn:hover {
  background-color: #45a049;
}

.edit-btn {
  background-color: #2196F3;
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 5px;
}

.edit-btn:hover {
  background-color: #1976D2;
}

.delete-btn {
  background-color: #f44336;
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
}

.delete-btn:hover {
  background-color: #d32f2f;
}

.table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
}

.table th,
.table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.table th {
  background-color: #f2f2f2;
}

.empty-tip {
  color: #999;
  margin-top: 20px;
  padding: 10px;
  border: 1px dashed #ddd;
  border-radius: 4px;
  text-align: center;
}

.error-message {
  color: #f44336;
  background-color: #ffebee;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 15px;
  border: 1px solid #ffcdd2;
}

button {
  padding: 6px 12px;
  cursor: pointer;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
}

button:hover:not(:disabled) {
  background-color: #f5f5f5;
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
</style>
